import React from 'react';
import { useNavigate } from 'react-router-dom';
import style from './DrugCard.module.css';

// 药品数据接口
interface DrugData {
  id?: number;
  restorativesid?: number;
  restorativesimage: string;
  restorativesname: string;
  restorativesstate: string;
  restorativesprice: number;
}
interface DrugCardProps {
  drug: DrugData;
  onClick?: (drug: DrugData) => void;
}
const DrugCard: React.FC<DrugCardProps> = ({ drug }) => {
  const nav = useNavigate();
  return (
    <div className={style.drugCard}  onClick={() => nav(`/shop/${drug.id ?? drug.restorativesid}`)}>
      <div className={style.drugImageContainer}>
        <img 
          src={drug.restorativesimage} 
          alt={drug.restorativesname}
          className={style.drugImage}
        />
      </div>
      <div className={style.drugInfo}>
        <h3 className={style.drugName}>{drug.restorativesname}</h3>
        <div className={style.drugPrice}>
          <span className={style.currentPrice}>¥{drug.restorativesprice}</span>
        </div>
      </div>
    </div>
  );
};

export default DrugCard;
